<!--
说明：
* xNode 为 x6的Node
* flowNode 为 数据库的 flowNode，对应表是 fa_csmflow_flowfstatuslogic
* flowEdge 为 表flowfstatuslogic的当前状态和审核通过后的状态
* graph中的 start 和 end 节点是虚拟上去的，数据库中没有改数据
-->
<template>
	<div id="container"></div>
	<div id="graph_button">
		<el-button @click="click_zoomIn" size="small">放大</el-button>
		<el-button @click="click_zoomOut" size="small">缩小</el-button>
		<el-button @click="click_reAlign" size="small">重新排版</el-button>
	</div>
	<div id="graph_submit_button">
		<el-button @click="click_checkData">检查数据</el-button>
		<el-button type="danger">更新生效</el-button>
	</div>

	<div id="graph_button">
		<el-button @click="click_zoomIn" size="small">放大</el-button>
		<el-button @click="click_zoomOut" size="small">缩小</el-button>
		<el-button @click="click_reAlign" size="small">重新排版</el-button>
	</div> <button-statusnode-delete ref="button-statusnode-delete" :fstatusList="sr.data.fstatusList"
		:flogicList="sr.data.flogicList" />
	<button-statusnode-add ref="button-statusnode-add" :fstatusList="sr.data.fstatusList"
		:flogicList="sr.data.flogicList" />
	<button-statusnode-branch ref="button-statusnode-branch" :fstatusList="sr.data.fstatusList"
		:flogicList="sr.data.flogicList" />
	<button-logicnode-delete ref="button-logicnode-delete" :fstatusList="sr.data.fstatusList"
		:flogicList="sr.data.flogicList" />
	<button-logicnode-add ref="button-logicnode-add" :fstatusList="sr.data.fstatusList"
		:flogicList="sr.data.flogicList" />
	<node-config-statusnode ref="node-config-statusnode" :data="sr" />
	<node-config-logicnode ref="node-config-logicnode" :data="sr" />
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';
	import xcFlowUtils from '@/library/xcore/js/XcFlowUtils';
	import srDataDemo from './xc-xcflow-setting/data/xc-xcflow-left-sr-data-demo.json';
	import srDataDict from './xc-xcflow-setting/data/xc-xcflow-left-sr-data-dict.json';
	import buttonStatusnodeDelete from './xc-xcflow-setting/button-statusnode-delete';
	import buttonStatusnodeAdd from './xc-xcflow-setting/button-statusnode-add';
	import buttonStatusnodeBranch from './xc-xcflow-setting/button-statusnode-branch';
	import buttonLogicnodeDelete from './xc-xcflow-setting/button-logicnode-delete';
	import buttonLogicnodeAdd from './xc-xcflow-setting/button-logicnode-add';
	import nodeConfigStatusnode from './xc-xcflow-setting/node-config-statusnode';
	import nodeConfigLogicnode from './xc-xcflow-setting/node-config-logicnode';

	export default {
		props: {
			data: {
				type: Object,
				default: []
			},
		},
		watch: {
			'data': {
				handler(newVal, oldVal) {
					let that = this;
				},
			},
		},
		components: {
			buttonStatusnodeDelete,
			buttonStatusnodeAdd,
			buttonStatusnodeBranch,
			buttonLogicnodeDelete,
			buttonLogicnodeAdd,
			nodeConfigStatusnode,
			nodeConfigLogicnode,
		},
		data() {
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {},
				sr: {
					data: [],
					rejecttypeList: [],
					typefieldList: [],
					assigneetypeList: [],
					userList: [],
					roleList: [],
					elList: [],
				},
				control: {
					graph: null,
					ryNodes: [],
				},
			}
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
				that.sr.data = srDataDemo;
				that.sr.rejecttypeList = srDataDict["rejecttypeList"];
				that.sr.assigneetypeList = srDataDict["assigneetypeList"];
				that.sr.typefieldList = srDataDict["typefieldList"];
				that.sr.userList = srDataDict["userList"];
				that.sr.roleList = srDataDict["roleList"];
				that.sr.elList = srDataDict["elList"];
				that.$nextTick(function() {
					that.public_show();
				}, 1000);
			},
			public_show() {
				let that = this;
				let graph = xcFlowUtils.initGraph('container');
				this.control.graph = graph;

				that._renderDataGraph(graph);

				xcFlowUtils.bindEvent(graph, 'xstatus node:add', function(node) {
					console.log('ADD', node);
					let clickFstatusId = that._getClickFstatusIdWhileEvent(node);

					that.$refs["button-statusnode-add"].public_show(clickFstatusId, function() {
						that._renderDataGraph(graph);
					});
				});

				xcFlowUtils.bindEvent(graph, 'xstatus node:branch', function(node) {
					console.log('Branch', node);
					let clickFstatusId = that._getClickFstatusIdWhileEvent(node);

					that.$refs["button-statusnode-branch"].public_show(clickFstatusId, function() {
						that._renderDataGraph(graph);
					});
				});

				xcFlowUtils.bindEvent(graph, 'xstatus node:delete', function(node) {
					console.log('DELETE', node);
					let clickFstatusId = that._getClickFstatusIdWhileEvent(node);

					that.$refs["button-statusnode-delete"].public_show(clickFstatusId, function() {
						that._renderDataGraph(graph);
					});
				});

				xcFlowUtils.bindEvent(graph, 'xlogic node:add', function(node) {
					console.log('ADD', node);
					let clickFlogicId = that._getClickFlogicIdWhileEvent(node);

					that.$refs["button-logicnode-add"].public_show(clickFlogicId, function() {
						that._renderDataGraph(graph);
					});
				});

				xcFlowUtils.bindEvent(graph, 'xlogic node:delete', function(node) {
					console.log('DELETE', node);
					let clickFlogicId = that._getClickFlogicIdWhileEvent(node);

					that.$refs["button-logicnode-delete"].public_show(clickFlogicId, function() {
						that._renderDataGraph(graph);
					});
				});

				xcFlowUtils.bindEvent(graph, 'xstatus node:click', function(node) {
					console.log('xstatus node:click', node);
					let clickFstatusId = that._getClickFstatusIdWhileEvent(node);

					that.$refs["node-config-statusnode"].public_show(clickFstatusId, function() {
						that._renderDataGraph(graph);
					});
				});


				xcFlowUtils.bindEvent(graph, 'xlogic node:click', function(node) {
					console.log('xlogic node:click', node);
					let clickFlogicId = that._getClickFlogicIdWhileEvent(node);

					that.$refs["node-config-logicnode"].public_show(clickFlogicId, function() {
						that._renderDataGraph(graph);
					});

				});
			},
			_getClickFstatusIdWhileEvent(node) {
				let that = this;
				let index = xsArrayUtils.indexOfByObjectKey(that.control.ryNodes, 'nodeId', node.id);
				let fstatusRyNode = that.control.ryNodes[index];
				return fstatusRyNode.item.id;
			},
			_getClickFlogicIdWhileEvent(node) {
				let that = this;
				let index = xsArrayUtils.indexOfByObjectKey(that.control.ryNodes, 'nodeId', node.id);
				let fstatusRyNode = that.control.ryNodes[index];
				return fstatusRyNode.item.id;
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			_renderDataGraph(graph) {
				let that = this;
				console.log("ready _renderDataGraph", that.sr.data.fstatusList, that.sr.data.flogicList);
				that.control.ryNodes = [];

				let nodes = [];
				let edges = [];

				if (true) {
					for (let index in that.sr.data.fstatusList) {
						let item = that.sr.data.fstatusList[index];
						let node = xcFlowUtils.createStatusNode(graph, item['name'], '');
						that.control.ryNodes["S" + item.id] = {
							item: item,
							node: node,
							nodeId: node.id
						};
						nodes.push(node);
					}

					for (let index in that.sr.data.flogicList) {
						let item = that.sr.data.flogicList[index];
						if (item["logictype"] != "all") {
							let node = xcFlowUtils.createLogicNode(graph, item['name'], '');
							nodes.push(node);
							that.control.ryNodes["L" + item.id] = {
								item: item,
								node: node,
								nodeId: node.id
							};
						}
					}
				}
				console.log("ryNodes", that.control.ryNodes);

				if (true) {
					for (let index in that.sr.data.flogicList) {
						let item = that.sr.data.flogicList[index];
						if (item["logictype"] == "all") {
							let source = that.control.ryNodes["S" + item.flowfstatus_id]["node"];
							let target = that.control.ryNodes["S" + item.pass_typefstatus_id]["node"];
							edges.push(xcFlowUtils.createEdge(graph, source, target));

							console.log("S" + item.flowfstatus_id + " -> " + "S" + item.pass_typefstatus_id);
						} else {
							let source_1 = that.control.ryNodes["S" + item.flowfstatus_id]["node"];
							let target_1 = that.control.ryNodes["L" + item.id]["node"];
							edges.push(xcFlowUtils.createEdge(graph, source_1, target_1));
							console.log("S" + item.flowfstatus_id + " -> " + "L" + item.id);

							let source_2 = that.control.ryNodes["L" + item.id]["node"];
							let target_2 = that.control.ryNodes["S" + item.pass_typefstatus_id]["node"];
							edges.push(xcFlowUtils.createEdge(graph, source_2, target_2));
							console.log("L" + item.id + " -> " + "S" + item.pass_typefstatus_id);
						}
					}
				}

				xcFlowUtils.renderGraph(graph, [...nodes, ...edges]);
			},
			click_zoomIn: function() {
				let that = this;
				that.control.graph.zoom(0.2);
			},
			click_zoomOut: function() {
				let that = this;
				that.control.graph.zoom(-0.2);
			},
			click_reAlign: function() {
				let that = this;

				xcFlowUtils.layout(that.control.graph, "TB");
				that.control.graph.centerContent();
			},
			click_checkData() {
				let that = this;
				let msgs = "";

				// 检查所有的 status node 是否有传入线条
				for (let index in that.sr.data.fstatusList) {
					let item = that.sr.data.fstatusList[index];
					if (item["id"] == that.sr.data.fstatusBeginId) {
						continue;
					}
					let isFound = false;
					for (let index2 in that.sr.data.flogicList) {
						let item2 = that.sr.data.flogicList[index2];
						if (item["id"] == item2["pass_typefstatus_id"]) {
							isFound = true;
						}
					}

					if (isFound === false) {
						msgs += "【" + item["name"] + "】没有父节点，需要删除；\r\n";
					}
				}

				// 检查fstatus配置是否完整
				for (let index in that.sr.data.flogicList) {
					let item = that.sr.data.flogicList[index];
					let isError = false;
					if (item["pass_typefstatus_id"] != null) {
						isError = true;
					}
					if (xsStringUtils.isEmpty(item["rejecttype"])) {
						isError = true;
					}
					if (item["rejecttype"] == "to" && item["rejecttype_to_typefstatus_id"] != null) {
						isError = true;
					}
					if (xsStringUtils.isEmpty(item["assigneetype"])) {
						isError = true;
					}
					if (item["assigneetype"] == "user" && item["rejecttype_to_typefstatus_id"] != null) {
						isError = true;
					}
					if (item["assigneetype"] == "user" && item["rejecttype_to_typefstatus_id"] != null) {
						isError = true;
					}
					
					let nodeName = item["name"];
					if(item["logictype"]=="all"){
						console.log('-=-',that.sr.data.fstatusList,item["flowfstatus_id"]);
						let statusIndex = xsArrayUtils.indexOfByObjectKey(that.sr.data.fstatusList,'id',item["flowfstatus_id"]);
						nodeName = that.sr.data.fstatusList[statusIndex]["name"];
					}
					
					if (isError === true) {
						msgs += "【" + nodeName + "】配置不完整，请补充；\r\n";
					}
				}


				xcViewUtils.confirm("校验结果", msgs, function() {});
			}
		}
	}
</script>

<style lang="scss">
	#container {
		height: calc(100vh - 96px) !important;
	}

	#graph_button {
		position: fixed;
		top: 50px;
		left: 50px;
	}

	#graph_submit_button {
		position: fixed;
		top: 50px;
		right: 50px;
	}
</style>